<template>
  <button id="emo" @blur="blur" @focus="focus">
    <!-- <div class="dcyj">
      <i class="iconfont icon-haopingxiaolian-xianxing biaoqing"></i>
    </div> -->
    <div class="classify">
      <div class="top">1</div>
      <div class="botton">2</div>
      <hr />
      <ul>
        <li
          :class="{ ckCol: index == ckCol }"
          v-for="(item, index) in faceList"
          :key="index"
          @click="ClickIcon(index)"
        >
          {{ item.name }}
        </li>
      </ul>
      <div class="icon">
        <div
          :class="{ disp: index == disps }"
          v-for="(item, index) in faceList"
          :key="index"
        >
          <span
            v-for="(item, indexs) in faceList[index].iconArr"
            :key="indexs"
            @mousedown="DownIcon(item.icon)"
            >{{ item.icon }}</span
          >
        </div>
      </div>
    </div>
  </button>
</template>

<script>
import { emojiArr } from "./emojiArr";

export default {
  data() {
    return {
      faceList: emojiArr, //引入的表情包数组
      ckCol: 0,
      disps: 0,
      // biaoqing: ""
    };
  },
  methods: {
    ClickIcon(index) {
      this.disps = index;
      this.ckCol = index;
    },
    blur() {
      $("#emo").hide();
    },
    DownIcon(icon) {
      // this.biaoqing += icon;
      this.$emit("icomDown", icon);
    },
  },
  mounted() {
    $(document).ready(function () {
      $("#emo").focus();
    });
  },
};
</script>

<style>
@import url("./emo.css");
</style>

